Rain Animation Using Js

Home / Web Code Snippet / Rain Animation Using Js

Rain Animation Using Js


HTML CODE:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

CSS CODE:-

    body{
            padding: 0px;
            margin: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: black;
        }
        .container{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 300px;
            width:100%;
        }
        .box{
            position: relative;
            width: 300px;
            height: 100px;
            background: white;
            border-radius: 100px;
            filter: drop-shadow(0px 0px 20px white);
        }
        .box::before{
            content: "";
            position: absolute;
            top: -50px;
            left: 40px;
            background: white;
            height: 100px;
            width: 100px;
            border-radius: 50%;
            box-shadow: 90px -20px 0 10px white;
        }
        .drop{
            position: absolute;
            top: 100px;
            background:white;
            width: 2px;
            height: 10px;
            border-radius: 50px;
            transform-origin: bottom;
            animation: animate 2s linear infinite;
        }
        @keyframes animate{
            0%{
                transform: translateY(0) scaleY(1);
            }
            70%{
                transform: translateY(230px) scaleY(1);
            }
            80%{
                transform: translateY(230px) scaleY(0.2);
            }
            100%{
                transform: translateY(230px) scaleY(0) scaleX(15);
            }
        }

JS CODE:-

function abc(){
            let box = document.querySelector('.box');
            let e = document.createElement('div');
            let left = Math.floor(Math.random() * 300);
            let width = Math.random() * 5;
            let height = Math.random() * 50;
            let duration = Math.random() * 0.5;
                e.classList.add('drop');
                box.appendChild(e);
                e.style.left = left + 'px';
                e.style.width = 0.5 + width + 'px';
                e.style.height = 0.5 + height + 'px';
                e.style.duration = 1 + duration+'s';
               
                setTimeout(function(){
                     box.removeChild(e)
                 },2000)
            }

        setInterval(function(){
            abc()
        },20);